<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--
        我们学过的指令：
            v-bind   : 单向绑定解析表达式，可简写为:XXX
            v-model  : 双向数据绑定
            v-for    : 遍历数组/对象/字符串
            v-on     : 绑定事件监听，可简写为@
            v-if     : 条件渲染（动态控制节点是否存存在）
            v-else   : 条件渲染（动态控制节点是否存存在）
            v-show   : 条件渲染（动态控制节点是否展示）

        v-text指令：
            1.作用：向其所在的节点中渲染文小内容。
            2.与插值语法的区别：v-text会替换掉节点中的内容，{(xx}则不会。
    -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name">111</div> 111被替换
        <div v-text="str"></div>
        <div>{{str}}</div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时产生产提示
    new Vue({
        el:'#root',
        data() {
            return {
                name:'尚硅谷',
                str:'<h3>尚硅谷</h3>'
            }
        },
    })
</script>
</html>